/*! _forms-slider.scss | Vuero | Css ninja 2020-2021 */

/*
    1. NoUI Slider
    2. NoUI Slider Dark mode
*/

/* ==========================================================================
1. NoUI Slider
========================================================================== */

/* .noUi-horizontal,
.noUi-vertical {
  border: none;
  box-shadow: none;

  &.is-info {
    .noUi-connect {
      background: var(--info);
    }

    .noUi-tooltip {
      background: var(--info);
      color: var(--smoke-white);

      &::after {
        background: var(--info);
      }
    }
  }

  &.is-success {
    .noUi-connect {
      background: var(--success);
    }

    .noUi-tooltip {
      background: var(--success);
      color: var(--smoke-white);

      &::after {
        background: var(--success);
      }
    }
  }

  &.is-warning {
    .noUi-connect {
      background: var(--warning);
    }

    .noUi-tooltip {
      background: var(--warning);
      color: var(--smoke-white);

      &::after {
        background: var(--warning);
      }
    }
  }

  &.is-danger {
    .noUi-connect {
      background: var(--danger);
    }

    .noUi-tooltip {
      background: var(--danger);
      color: var(--smoke-white);

      &::after {
        background: var(--danger);
      }
    }
  }

  .noUi-connects {
    background: var(--widget-grey-dark-2);
    border: none !important;
  }

  .noUi-connect {
    background-color: var(--primary);
  }

  .noUi-handle {
    outline: none !important;
    box-shadow: var(--light-box-shadow);
  }
}

.noUi-horizontal {
  &.is-small {
    height: 10px;

    &.is-rounded {
      .noUi-handle {
        border-radius: var(--radius-rounded);
      }
    }

    .noUi-handle {
      width: 22px;
      height: 22px;
      top: -6px;

      &::before {
        height: 10px;
        top: 5px;
        left: 8px;
      }

      &::after {
        height: 10px;
        top: 5px;
        left: 11px;
      }
    }
  }

  &.is-tiny {
    height: 6px;

    &.is-rounded {
      .noUi-handle {
        border-radius: var(--radius-rounded);
      }
    }

    .noUi-handle {
      width: 18px;
      height: 18px;
      top: -6px;

      &::before {
        height: 10px;
        top: 3px;
        left: 6px;
      }

      &::after {
        height: 10px;
        top: 3px;
        left: 9px;
      }
    }
  }

  .noUi-handle {
    width: 28px;
    height: 28px;

    &::before {
      left: 11px;
    }

    &::after {
      left: 16px;
    }
  }

  .noUi-tooltip {
    background: var(--primary);
    color: var(--smoke-white);

    &::after {
      background: var(--primary);
    }
  }
}

.noUi-vertical {
  height: 180px;

  &.is-small {
    width: 10px;

    &.is-rounded {
      .noUi-handle {
        border-radius: var(--radius-rounded);
      }
    }

    .noUi-handle {
      width: 22px;
      height: 22px;
      top: -6px;

      &::before {
        width: 10px !important;
        top: 7px !important;
        left: 6px !important;
      }

      &::after {
        width: 10px !important;
        top: 11px !important;
        left: 6px !important;
      }
    }
  }

  &.is-tiny {
    width: 6px;

    &.is-rounded {
      .noUi-handle {
        border-radius: var(--radius-rounded);
      }
    }

    .noUi-handle {
      width: 18px;
      height: 18px;
      top: -6px;

      &::before {
        width: 8px !important;
        top: 6px !important;
        left: 4px !important;
      }

      &::after {
        width: 8px !important;
        top: 9px !important;
        left: 4px !important;
      }
    }
  }

  .noUi-handle {
    width: 28px;
    height: 28px;

    &::before {
      left: 7px;
      top: 10px;
    }

    &::after {
      left: 7px;
      top: 15px;
    }
  }
}

.noUi-horizontal,
.noUi-vertical {
  &.has-fixed-tooltip {
    .noUi-tooltip {
      opacity: 1 !important;
      pointer-events: all !important;
      transform: translate(-50%, 0) scale(1) !important;
    }
  }

  .noUi-tooltip {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-family: var(--font);
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10%) scale(0.8);
    border-radius: var(--radius-rounded);
    background: var(--primary);
    position: absolute;
    left: 50%;
    top: -70px;
    transition: all 0.3s;
    padding: 0;

    &::after {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      width: 50px;
      height: 50px;
      border-radius: var(--radius-rounded) 50% 50% 0;
      transform: rotate(-45deg);
      background: var(--primary);
      z-index: -1;
    }
  }

  .noUi-active .noUi-tooltip {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, 0) scale(1);
  }
} */

/* ==========================================================================
2. NoUI Slider Dark mode
========================================================================== */

/* .is-dark {
  .noUi-horizontal,
  .noUi-vertical {
    &.is-info {
      .noUi-connect {
        background: var(--info);
      }

      .noUi-tooltip {
        background: var(--info);

        &::after {
          background: var(--info);
        }
      }
    }

    &.is-success {
      .noUi-connect {
        background: var(--success);
      }

      .noUi-tooltip {
        background: var(--success);

        &::after {
          background: var(--success);
        }
      }
    }

    &.is-warning {
      .noUi-connect {
        background: var(--warning);
      }

      .noUi-tooltip {
        background: var(--warning);

        &::after {
          background: var(--warning);
        }
      }
    }

    &.is-danger {
      .noUi-connect {
        background: var(--danger);
      }

      .noUi-tooltip {
        background: var(--danger);

        &::after {
          background: var(--danger);
        }
      }
    }

    .noUi-connects {
      background: var(--dark-sidebar-light-2);
    }

    .noUi-connect {
      background-color: var(--primary);
    }

    .noUi-handle {
      background: var(--dark-sidebar);
      border-color: var(--dark-sidebar-light-12);

      &::before,
      &::after {
        background: var(--dark-sidebar-light-20);
      }
    }

    .noUi-tooltip {
      background: var(--primary);

      &::after {
        background: var(--primary);
      }
    }
  }
} */

/* ==========================================================================
1. Vue Slider
========================================================================== */

.slider-target {
  .slider-base {
    .slider-connects {
      .slider-connect {
        background: var(--primary);
      }
    }

    .slider-tooltip {
      font-size: 0.9rem;
      border: 1px solid var(--primary);
      background: var(--primary);
    }
  }
}

.is-slider-info {
  .slider-target {
    .slider-base {
      .slider-connects {
        .slider-connect {
          background: var(--info);
        }
      }

      .slider-tooltip {
        border: 1px solid var(--info);
        background: var(--info);
      }
    }
  }
}

.is-slider-success {
  .slider-target {
    .slider-base {
      .slider-connects {
        .slider-connect {
          background: var(--success);
        }
      }

      .slider-tooltip {
        border: 1px solid var(--success);
        background: var(--success);
      }
    }
  }
}

.is-slider-warning {
  .slider-target {
    .slider-base {
      .slider-connects {
        .slider-connect {
          background: var(--warning);
        }
      }

      .slider-tooltip {
        border: 1px solid var(--warning);
        background: var(--warning);
      }
    }
  }
}

.is-slider-danger {
  .slider-target {
    .slider-base {
      .slider-connects {
        .slider-connect {
          background: var(--danger);
        }
      }

      .slider-tooltip {
        border: 1px solid var(--danger);
        background: var(--danger);
      }
    }
  }
}

.has-rounded-tooltip {
  .slider-target {
    .slider-base {
      .slider-handle {
        .slider-tooltip {
          border-radius: 100px;
          width: 28px;
          height: 28px;
          font-size: 0.9rem;
          display: flex;
          justify-content: center;
          align-items: center;
          line-height: 3;
        }
      }
    }
  }
}

.has-curved-tooltip {
  .slider-target {
    .slider-base {
      .slider-handle {
        .slider-tooltip {
          border-radius: 0.75rem;
          min-width: 28px;
          padding-left: 0.75rem;
          padding-right: 0.75rem;
          height: 28px;
          font-size: 0.9rem;
          display: flex;
          justify-content: center;
          align-items: center;
          line-height: 3;
        }
      }
    }
  }
}

.has-squared-tooltip {
  .slider-target {
    .slider-base {
      .slider-handle {
        .slider-tooltip {
          border-radius: 0.5rem;
          min-width: 28px;
          padding-left: 0.75rem;
          padding-right: 0.75rem;
          height: 28px;
          font-size: 0.9rem;
          display: flex;
          justify-content: center;
          align-items: center;
          line-height: 3;
        }
      }
    }
  }
}

.is-dark {
  .slider-target {
    .slider-base {
      background: var(--dark-sidebar-light-2);
    }
  }
}
